<template>
  <el-dialog :title="title" :visible="visible" @close="handleClose" width="800px">
    <div>
      <el-table style="margin-top: 10px;" :data="wareList" height="405px">
        <el-table-column prop="sto_name" label="仓库名"></el-table-column>
        <el-table-column prop="rule_name" label="规则"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button icon="el-icon-switch-button" type="text" @click="closeTable(scope.row)">关闭</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
                     :page-sizes="[10, 20, 50, 100]" :total="total">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getRuleData ,//提交规则关联
    putRuleEnableStatus//取消关联
  } from '@/api/basic/PersonnelInformation.js'
  export default {
    data() {
      return {
        wareList:[],
        title: '关联仓库查询',
        dataForm:{},
        pageNum:1,
        pageSize:10,
        total:0
      }
    },
    props: {
      visible: { // 接收父组件通过sync传递的visible属性
        type: Boolean,
        default: false
      }
    },
    methods: {
      //调用接口拿到table数据
      getTableData(){
        let param = {
          type:this.dataForm.id,
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
        getRuleData(param).then(res=>{
          this.wareList = res.rows;
          this.total = res.total;
        })
      },
      //分页
      handleSizeChange(newsize) {
        this.pageNum = 1
        this.pageSize = newsize
        this.getTableData()
      },
      handleCurrentChange(newpage) {
        this.pageNum = newpage
        this.getTableData()
      },
      //打开table
      openDialog(row) {
        this.ruleArea = row.children;
        this.dataForm = row;
        this.getTableData();
      },
      //关闭关联
      closeTable(data){
        let param = {
          id:data.wrmId
        }
        putRuleEnableStatus(param).then(res=>{
          this.$message.success(res.msg);
          this.getTableData();
        })
      },
      // 提取重置表单的逻辑
      handleClose() {
        this.$emit('update:visible', false);
      },
    }
  }
</script>

<style scoped>
::v-deep .el-pagination {
  display: flex;
  margin: 20px;
  justify-content: flex-end;
}
</style>
